<template>
    <div v-if="tags && tags.length>0">
        <a-tag  :color="item.color" v-for="item in tags"><span :style="{'color':item.fontColor}">{{ item.label }}</span></a-tag>
    </div>
</template>

<script>
import FormApi from "@/views/modules/form/core/js-comps/api/FormApi";

export default {
    name: "phase-tag",
    props: ["value", "renderConfStr","renderSourceCache"],
    data() {
        return {
            text:this.value||"",
            tags: [],
            renderConf:{}
        }
    },
    created() {
        if(this.renderConfStr){
            this.renderConf=JSON.parse(this.renderConfStr);
            this.initRender();
        }
    },
    methods: {
        initRender(){
            var type = this.renderConf.type;
            var colors = this.renderConf.colors;
            //自定义方式
            if(type=="custom"){
                var customConfigs = this.renderConf.customConfigs;
                this.tags=this.getPhaseColors(customConfigs,colors,type);
            }else {
                //数据字典
                var dicKey = this.renderConf.dicKey;
                if(this.renderSourceCache[dicKey]){
                    this.tags=this.getPhaseColors(this.renderSourceCache[dicKey],colors,type);
                }else {
                    var self=this;
                    this.$emit("setRenderSourceCache",dicKey,[]);
                    FormApi.loadDic(dicKey).then(res=>{
                        if(res && res.length>0){
                            self.$emit("setRenderSourceCache",dicKey,res);
                            self.tags=self.getPhaseColors(res,colors,type);
                        }
                    });
                }
            }
        },
        //获取阶段的所有颜色
        getPhaseColors(customConfigs,colors,type){
            if(!customConfigs || customConfigs.length==0){
                return [];
            }
            var tags=[];
            //已完成
            var completed = colors.completed;
            var completedColor = colors.completedColor;
            //当前
            var current = colors.current;
            var currentColor = colors.currentColor;
            //未完成
            var notCompleted = colors.notCompleted;
            var notCompletedColor = colors.notCompletedColor;

            //无数据默认都为未完成
            if(!this.text){
                for (let i = 0; i < customConfigs.length; i++) {
                    var config=customConfigs[i];
                    var tagColor= this.getTagColor(config,notCompleted,notCompletedColor,type);
                    tags.push(tagColor);
                }
                return tags;
            }else {
                var index_=0;
                //获取当前数据所在位置
                for (let i = 0; i < customConfigs.length; i++) {
                    var config=customConfigs[i];
                    if(this.text==config.value){
                        index_=i;
                        break;
                    }
                }
                //获取已完成数据颜色
                for (let i = 0; i < index_; i++) {
                    var config=customConfigs[i];
                    var tagColor= this.getTagColor(config,completed,completedColor,type);
                    tags.push(tagColor);
                }
                //当前
                var curTagColor=this.getTagColor(customConfigs[index_],current,currentColor,type);
                tags.push(curTagColor);

                //获取已完成数据颜色
                if(customConfigs.length>index_+1){
                    for (let i = index_+1; i < customConfigs.length; i++) {
                        var config=customConfigs[i];
                        var tagColor= this.getTagColor(config,notCompleted,notCompletedColor,type);
                        tags.push(tagColor);
                    }
                }
                return tags;
            }
        },
        //获取标签颜色
        getTagColor(config,color,fontColor,type){
            var label=type=="custom"?config.label:config.name
            return {
                label:label,
                value:config.value,
                color:color,
                fontColor:fontColor,
            };


        }
    },
    watch: {
        'renderSourceCache':{
            handler: function (val, oldVal) {
                if(!this.tags || this.tags.length==0){
                    this.initRender();
                }
            },
            deep: true
        },
        'value':{
            handler: function (val, oldVal) {
                this.text=val;
                this.initRender();
            },
            deep: true
        },

    }
}
</script>

<style scoped>
</style>